<template>
  <div class="box">
    <a-card title="添加角色" style="width: 90%;margin-left: 5%;margin-top: 20px;">
        <template #extra><a href="#">保存</a><a href="#" style="margin-left: 20px;" @click="goback">返回</a></template>
        <a-form
    ref="formRef"
    :model="formState"
    :rules="rules"
    :label-col="labelCol"
    :wrapper-col="wrapperCol"
  >
    <a-form-item ref="name" label="角色名称" name="name">
      <a-input v-model:value="formState.name" />
    </a-form-item>
    <a-form-item ref="name" label="角色名称" name="name">
        <a-tree
    checkable
    :tree-data="treeData"
    v-model:expandedKeys="expandedKeys"
    v-model:selectedKeys="selectedKeys"
    v-model:checkedKeys="checkedKeys"
  >
    <template #title0010><span style="color: #1890ff">sss</span></template>
  </a-tree>
    </a-form-item>
    <a-form-item ref="name" label="移动端后台权限" name="name">
        <a-tree
    checkable
    :tree-data="treeData"
    v-model:expandedKeys="expandedKeys"
    v-model:selectedKeys="selectedKeys"
    v-model:checkedKeys="checkedKeys"
  >
    <template #title0010><span style="color: #1890ff">sss</span></template>
  </a-tree>
    </a-form-item>
    <a-form-item ref="admin" label="操作权限" name="admin">
        <a-checkbox-group v-model:value="value1" name="checkboxgroup" :options="plainOptions" />
    </a-form-item>
    <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
      <a-button type="primary" @click="onSubmit">保存</a-button>
      <a-button style="margin-left: 10px" @click="resetForm">返回</a-button>
    </a-form-item>
  </a-form>
  </a-card>
  </div>
</template>

<script>
import {useRouter} from 'vue-router'
import { ValidateErrorEntity } from 'ant-design-vue/es/form/interface';
import { Moment } from 'moment';
import { defineComponent, reactive, ref, toRaw,watch ,toRefs  } from 'vue';

const plainOptions = ['导出数据', '删除数据', '分配客服'];
const treeData = [
  {
    title: 'parent 1',
    key: '0-0',
    children: [
      {
        title: 'parent 1-0',
        key: '0-0-0',
        disabled: true,
        children: [
          { title: 'leaf', key: '0-0-0-0', disableCheckbox: true },
          { title: 'leaf', key: '0-0-0-1' },
        ],
      },
      {
        title: 'parent 1-1',
        key: '0-0-1',
        children: [{ key: '0-0-1-0', slots: { title: 'title0010' } }],
      },
    ],
  },
];
export default {
   
    setup(){
        const state = reactive({
      value1: [],

    });
        const expandedKeys = ref(['0-0-0', '0-0-1']);
    const selectedKeys = ref(['0-0-0', '0-0-1']);
    const checkedKeys = ref(['0-0-0', '0-0-1']);
    watch(expandedKeys, () => {
      console.log('expandedKeys', expandedKeys);
    });
    watch(selectedKeys, () => {
      console.log('selectedKeys', selectedKeys);
    });
    watch(checkedKeys, () => {
      console.log('checkedKeys', checkedKeys);
    });
        const formRef = ref();
    const formState = reactive({
      name: '',
     admin:[]
    });
    const rules = {
      name: [
        { required: true, message: 'Please input Activity name', trigger: 'blur' },
        { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
      ],
    };
    const onSubmit = () => {
      formRef.value
        .validate()
        .then(() => {
          console.log('values', formState, toRaw(formState));
        })
        .catch((error) => {
          console.log('error', error);
        });
    };
    const resetForm = () => {
      formRef.value.resetFields();
    };
 
        const router=useRouter()
        const goback=()=>{
        router.push('/setting/adminrole')
    }
    return {
        plainOptions,
        goback,
        formRef,
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      other: '',
      formState,
      rules,
      onSubmit,
      resetForm,
      treeData,
      expandedKeys,
      selectedKeys,
      checkedKeys,
    }
    }
}
</script>

<style scoped>
.box{
    width: 90%;
    height: 100%;
    margin-left: 5%;
}
</style>